/**
 * Created by xiangjiayu on 2017/7/27.  大数据
 */
import React from "react";
import {Button, Col, DatePicker, Icon, Input, Popconfirm, Radio, Row, Select, Switch, Table, Tabs} from "antd";
import CheckBox from "../components/common/CheckBox/CheckBox"; //自定义 多选框

//常用组件引用
const Option = Select.Option;           //下拉框
const {MonthPicker, RangePicker} = DatePicker;//日历
const TabPane = Tabs.TabPane;
const RadioGroup = Radio.Group;

export default class BigData extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: 1,
      //年龄段消费比
      dataSource: [{
        key: '0',
        age: '18岁以下',
        money: '5000元',
        percent: '50%',
      }],
      count: 1,
    };
    //年龄段消费比
    this.columns = [{
      title: '年龄',
      dataIndex: 'age',
      width: '25%',
      className: 'ant-table-th-center',
    }, {
      title: '消费金额',
      dataIndex: 'money',
      width: '25%',
      className: 'ant-table-th-center',
    }, {
      title: '消费比例',
      dataIndex: 'percent',
      width: '25%',
      className: 'ant-table-th-center',
    }, {
      title: '操作',
      dataIndex: 'operation',
      width: '25%',
      className: 'ant-table-th-center',
      render: (text, record, index) => {
        return (
          this.state.dataSource.length > 1 ?
            (
              <Popconfirm title="确定删除?" onConfirm={() => this.onDelete(index)}>
                <a href="#">删除</a>
              </Popconfirm>
            ) : null
        );
      },
      className: 'ant-table-th-center',
    }];

    // --------------消费者行业
    //年龄段需求比
    this.dataSource_xuqiu = [{
      key: '0',
      age: '18岁以下',
      money: '5000元',
      percent: '50%',
    }],
    this.columns_xuqiu = [{
      title: '年龄',
      dataIndex: 'age',
      width: '33.3%',
      className: 'ant-table-th-center',
    }, {
      title: '消费金额',
      dataIndex: 'money',
      width: '33.3%',
      className: 'ant-table-th-center',
    }, {
      title: '消费比例',
      dataIndex: 'percent',
      width: '33.3%',
      className: 'ant-table-th-center',
    }];
    //消费者收入类型需求比
    this.dataSource_shouru = [{
      key: '0',
      age: '收入类型',
      money: '需求内容',
      percent: '50%',
    }],
    this.columns_shouru = [{
      title: '收入类型',
      dataIndex: 'age',
      width: '33.3%',
      className: 'ant-table-th-center',
    }, {
      title: '需求内容',
      dataIndex: 'money',
      width: '33.3%',
      className: 'ant-table-th-center',
    }, {
      title: '收入比例',
      dataIndex: 'percent',
      width: '33.3%',
      className: 'ant-table-th-center',
    }];
  }

  onChange = (e) => {
    this.setState({
      value: e.target.value,
    });
  }
  onCellChange = (index, key) => {
    return (value) => {
      const dataSource = [...this.state.dataSource];
      dataSource[index][key] = value;
      this.setState({dataSource});
    };
  }
  onDelete = (index) => {
    const dataSource = [...this.state.dataSource];
    dataSource.splice(index, 1);
    this.setState({dataSource});
  }
  handleAdd = () => {
    const {count, dataSource} = this.state;
    const newData = {
      key: count,
      age: <Row><Col span={12} offset={6}><Input size="large" placeholder="请输入年龄段"/></Col></Row>,
      money: <Row><Col span={12} offset={6}><Input size="large" placeholder="请输入消费金额"/></Col></Row>,
      percent: <Row><Col span={12} offset={6}><Input size="large" placeholder="请输入比例"/></Col></Row>,
    };
    this.setState({
      dataSource: [...dataSource, newData],
      count: count + 1,
    });
  }

  render() {
    const children = [];
    for (let i = 10; i < 36; i++) {
      children.push(<Option key={i.toString(36) + i}>{'地区地区' + i.toString(36) + i}</Option>);
    }
    let data_guize = [{
      text: '真实数据',
      state: true,
      type: 'radio'
    }, {
      text: '真实数据3倍展示',
      state: '',
      type: 'radio'
    }];
    const {dataSource} = this.state;
    const columns = this.columns;
    //需求
    const dataSource_xuqiu = this.dataSource_xuqiu;
    const columns_xuqiu = this.columns_xuqiu;
    //收入
    const dataSource_shouru = this.dataSource_shouru;
    const columns_shouru = this.columns_shouru;
    return (
      <div>
        <h3 className="title-h3">大数据</h3>
        <Tabs defaultActiveKey="1">
          <TabPane tab="在线数据" key="1">
            {/*设置数据规则*/}
            <div className="title-cont">
              <div className="title-page">
                <h4>设置数据规则</h4>
              </div>
              <Row gutter={16}>
                <Col span={3} className="text-r">
                  <div className="ant-form-item-label">
                    <label><span className="span-left">请选择时间范围</span></label>
                  </div>
                </Col>
                <Col span={5}>
                  <RangePicker size="large"/>
                </Col>
              </Row>
              <Row gutter={16}>
                <Col span={3} className="text-r">
                  <div className="ant-form-item-label">
                    <label><span className="span-left">请选择展示区域</span></label>
                  </div>
                </Col>
                <Col span={15}>
                  <div className="type-chooice">
                    <Tabs type="card">
                      <TabPane tab="按省分布" key="1">
                        <div className="btn-block-cont">
                          <Row gutter={16}>
                            <Col span={4}>
                              <a className="btn-block active">浙江省<Icon type="close"/></a>
                            </Col>
                            <Col span={4}>
                              <a className="btn-block">浙江省<Icon type="close"/></a>
                            </Col>
                          </Row>
                        </div>
                      </TabPane>
                      <TabPane tab="按市分布" key="2">
                        <div className="btn-block-cont">
                          <Row gutter={16}>
                            <Col span={4}>
                              <a className="btn-block active">南京市<Icon type="close"/></a>
                            </Col>
                            <Col span={4}>
                              <a className="btn-block">南京市<Icon type="close"/></a>
                            </Col>
                          </Row>
                        </div>
                      </TabPane>
                      <TabPane tab="按区域分布" key="3">
                        <div className="btn-block-cont">
                          <Row gutter={16}>
                            <Col span={4}>
                              <a className="btn-block active">雨花台区<Icon type="close"/></a>
                            </Col>
                            <Col span={4}>
                              <a className="btn-block">雨花台区<Icon type="close"/></a>
                            </Col>
                          </Row>
                        </div>
                      </TabPane>
                    </Tabs>
                  </div>
                  {/*<RadioGroup onChange={this.onChange} value={this.state.value} defaultValue={1}>*/}
                  {/*<Radio value={1}>按省分布</Radio>*/}
                  {/*<Radio value={2}>按市分布</Radio>*/}
                  {/*<Radio value={3}>按区域分布</Radio>*/}
                  {/*</RadioGroup>*/}
                  {/*{this.state.value === 1 ? <div>*/}
                  {/*<div className="btn-block-cont">*/}
                  {/*<Row gutter={16}>*/}
                  {/*<Col span={4}>*/}
                  {/*<a className="btn-block active">浙江省<Icon type="close" /></a>*/}
                  {/*</Col>*/}
                  {/*<Col span={4}>*/}
                  {/*<a className="btn-block">浙江省<Icon type="close" /></a>*/}
                  {/*</Col>*/}
                  {/*</Row>*/}
                  {/*</div>*/}
                  {/*</div> : null}*/}
                </Col>
              </Row>
              <Row gutter={16}>
                <Col span={3} className="text-r">
                  <div className="ant-form-item-label">
                    <label><span className="span-left">请选择数据类型</span></label>
                  </div>
                </Col>
                <Col span={15}>
                  <div className="type-chooice">
                    <Tabs type="card">
                      <TabPane tab="订单总数" key="1">
                        <p>请设置总数及累加规则</p>
                        <div className="data-chooice">
                          <CheckBox data={data_guize}></CheckBox>
                          <Input size="large" placeholder="手动数据(几倍)"/>
                        </div>
                      </TabPane>
                      <TabPane tab="企业总数" key="2">
                        <p>请设置总数及累加规则</p>
                        <div className="data-chooice">
                          <CheckBox data={data_guize}></CheckBox>
                          <Input size="large" placeholder="手动数据(几倍)"/>
                        </div>
                      </TabPane>
                      <TabPane tab="月嫂总数" key="3">
                        <p>请设置总数及累加规则</p>
                        <div className="data-chooice">
                          <CheckBox data={data_guize}></CheckBox>
                          <Input size="large" placeholder="手动数据(几倍)"/>
                        </div>
                      </TabPane>
                      <TabPane tab="客户总数" key="4">
                        <p>请设置总数及累加规则</p>
                        <div className="data-chooice">
                          <CheckBox data={data_guize}></CheckBox>
                          <Input size="large" placeholder="手动数据(几倍)"/>
                        </div>
                      </TabPane>
                    </Tabs>
                  </div>
                </Col>
              </Row>
            </div>
            {/*官网展现形式*/}
            <div className="title-cont">
              <div className="title-page">
                <h4>官网展现形式</h4>
              </div>
              <Row gutter={16}>
                <Col span={3} className="text-r">
                  <div className="ant-form-item-label">
                    <label><span className="span-left">数字展示</span></label>
                  </div>
                </Col>
                <Col span={21}>
                  <Switch size="large" checkedChildren="开" unCheckedChildren="关"/>
                </Col>
              </Row>
              <Row gutter={16}>
                <Col span={3} className="text-r">
                  <div className="ant-form-item-label">
                    <label><span className="span-left">地图展示</span></label>
                  </div>
                </Col>
                <Col span={21}>
                  <Switch size="large" checkedChildren="开" unCheckedChildren="关"/>
                </Col>
              </Row>
            </div>
            {/*提交*/}
            <div className="page-btn-cont">
              <Button size="large" type="primary">保存</Button>
              <Button size="large" type="default">取消</Button>
            </div>
          </TabPane>
          <TabPane tab="行业数据" key="2">
            <h4 className="page-title">消费者行业数据</h4>
            {/*消费者总数*/}
            <div className="title-cont">
              <div className="title-page">
                <h4>消费者总数</h4>
              </div>
              <div className="title-switch">
                <Switch size="large" checkedChildren="开" unCheckedChildren="关"/>
              </div>
              <Row gutter={16}>
                <Col span={3} className="text-r">
                  <div className="ant-form-item-label">
                    <label><span className="span-left">请填写总数</span></label>
                  </div>
                </Col>
                <Col span={5}>
                  <Input size="large" placeholder="请填写总数"/>
                </Col>
                <Col span={3}>
                  <Button size="large" type="primary">保存</Button>
                </Col>
              </Row>
            </div>
            {/*消费男女比例*/}
            <div className="title-cont">
              <div className="title-page">
                <h4>消费男女比例</h4>
              </div>
              <div className="title-switch">
                <Switch size="large" checkedChildren="开" unCheckedChildren="关"/>
              </div>
              <Row gutter={16}>
                <Col span={3} className="text-r">
                  <div className="ant-form-item-label">
                    <label><span className="span-left">请填写男女比例</span></label>
                  </div>
                </Col>
                <Col span={5}>
                  <Row gutter={16}>
                    <Col span={12}>
                      <Input size="large" placeholder="男"/>
                    </Col>
                    <Col span={12}>
                      <Input size="large" placeholder="女"/>
                    </Col>
                  </Row>
                </Col>
                <Col span={3}>
                  <Button size="large" type="primary">保存</Button>
                </Col>
              </Row>
            </div>
            {/*消费地图分布*/}
            <div className="title-cont">
              <div className="title-page">
                <h4>消费地图分布</h4>
              </div>
              <div className="title-switch">
                <Switch size="large" checkedChildren="开" unCheckedChildren="关"/>
              </div>
              <Row gutter={16}>
                <Col span={3} className="text-r">
                  <div className="ant-form-item-label">
                    <label><span className="span-left">请选择展示区域</span></label>
                  </div>
                </Col>
                <Col span={21}>
                  <RadioGroup onChange={this.onChange} value={this.state.value} defaultValue={1}>
                    <Radio value={1}>按省分布</Radio>
                    <Radio value={2}>按市分布</Radio>
                    <Radio value={3}>按区域分布</Radio>
                  </RadioGroup>
                </Col>
              </Row>
              {this.state.value === 1 ? <div>
                <Row gutter={16}>
                  <Col span={3} className="text-r">
                    <div className="ant-form-item-label">
                      <label><span className="span-left">请选择时间范围</span></label>
                    </div>
                  </Col>
                  <Col span={5}>
                    <RangePicker size="large"/>
                  </Col>
                </Row>
                <Row gutter={16}>
                  <Col span={3} className="text-r">
                    <div className="ant-form-item-label">
                      <label><span className="span-left">请选择区域</span></label>
                    </div>
                  </Col>
                  <Col span={5}>
                    <Row gutter={16}>
                      <Col span={12}>
                        <a className="btn-block active">浙江省<Icon type="close"/></a>
                      </Col>
                      <Col span={12}>
                        <Input placeholder="请输入比例" size="large"/>
                      </Col>
                    </Row>
                    <Row gutter={16}>
                      <Col span={12}>
                        <a className="btn-block">浙江省<Icon type="close"/></a>
                      </Col>
                      <Col span={12}>
                        <Input placeholder="请输入比例" size="large"/>
                      </Col>
                    </Row>
                    <Row gutter={16}>
                      <Col span={12}>
                        <a className="btn-block">浙江省<Icon type="close"/></a>
                      </Col>
                      <Col span={12}>
                        <Input placeholder="请输入比例" size="large"/>
                      </Col>
                    </Row>
                    <Row gutter={16}>
                      <Col span={12}>
                        <a className="btn-block">浙江省浙江省浙江省浙江省浙江省<Icon type="close"/></a>
                      </Col>
                      <Col span={12}>
                        <Input placeholder="请输入比例" size="large"/>
                      </Col>
                    </Row>
                  </Col>
                </Row>
              </div> : null}
              {this.state.value === 2 ? <div>
                <Row gutter={16}>
                  <Col span={3} className="text-r">
                    <div className="ant-form-item-label">
                      <label><span className="span-left">请选择时间范围</span></label>
                    </div>
                  </Col>
                  <Col span={5}>
                    <RangePicker size="large"/>
                  </Col>
                </Row>
                <Row gutter={16}>
                  <Col span={3} className="text-r">
                    <div className="ant-form-item-label">
                      <label><span className="span-left">请选择区域</span></label>
                    </div>
                  </Col>
                  <Col span={5}>
                    <Row gutter={16}>
                      <Col span={12}>
                        <a className="btn-block active">南京市<Icon type="close"/></a>
                      </Col>
                      <Col span={12}>
                        <Input placeholder="请输入比例" size="large"/>
                      </Col>
                    </Row>
                    <Row gutter={16}>
                      <Col span={12}>
                        <a className="btn-block">南京市<Icon type="close"/></a>
                      </Col>
                      <Col span={12}>
                        <Input placeholder="请输入比例" size="large"/>
                      </Col>
                    </Row>
                    <Row gutter={16}>
                      <Col span={12}>
                        <a className="btn-block">南京市<Icon type="close"/></a>
                      </Col>
                      <Col span={12}>
                        <Input placeholder="请输入比例" size="large"/>
                      </Col>
                    </Row>
                    <Row gutter={16}>
                      <Col span={12}>
                        <a className="btn-block">南京市<Icon type="close"/></a>
                      </Col>
                      <Col span={12}>
                        <Input placeholder="请输入比例" size="large"/>
                      </Col>
                    </Row>
                  </Col>
                </Row>
              </div> : null}
              {this.state.value === 3 ? <div>
                <Row gutter={16}>
                  <Col span={3} className="text-r">
                    <div className="ant-form-item-label">
                      <label><span className="span-left">请选择时间范围</span></label>
                    </div>
                  </Col>
                  <Col span={5}>
                    <RangePicker size="large"/>
                  </Col>
                </Row>
                <Row gutter={16}>
                  <Col span={3} className="text-r">
                    <div className="ant-form-item-label">
                      <label><span className="span-left">请选择区域</span></label>
                    </div>
                  </Col>
                  <Col span={5}>
                    <Row gutter={16}>
                      <Col span={12}>
                        <a className="btn-block active">雨花台区<Icon type="close"/></a>
                      </Col>
                      <Col span={12}>
                        <Input placeholder="请输入比例" size="large"/>
                      </Col>
                    </Row>
                    <Row gutter={16}>
                      <Col span={12}>
                        <a className="btn-block">雨花台区<Icon type="close"/></a>
                      </Col>
                      <Col span={12}>
                        <Input placeholder="请输入比例" size="large"/>
                      </Col>
                    </Row>
                    <Row gutter={16}>
                      <Col span={12}>
                        <a className="btn-block">雨花台区<Icon type="close"/></a>
                      </Col>
                      <Col span={12}>
                        <Input placeholder="请输入比例" size="large"/>
                      </Col>
                    </Row>
                    <Row gutter={16}>
                      <Col span={12}>
                        <a className="btn-block">雨花台区<Icon type="close"/></a>
                      </Col>
                      <Col span={12}>
                        <Input placeholder="请输入比例" size="large"/>
                      </Col>
                    </Row>
                  </Col>
                </Row>
              </div> : null}
              <div className="page-btn-cont">
                <Button size="large" type="primary">保存</Button>
              </div>
            </div>
            {/*消费者各年龄段消费占比*/}
            <div className="title-cont">
              <div className="title-page">
                <h4>消费者各年龄段消费占比</h4>
              </div>
              <div className="title-switch">
                <Switch size="large" checkedChildren="开" unCheckedChildren="关"/>
              </div>
              <div className="guimo-table">
                <Table bordered dataSource={dataSource} columns={columns} pagination={false}/>
                <Button className="editable-add-btn" onClick={this.handleAdd}>添加</Button>
              </div>
              <div className="page-btn-cont">
                <Button size="large" type="primary">保存</Button>
              </div>
            </div>
            {/*消费者各年龄段需求占比*/}
            <div className="title-cont">
              <div className="title-page">
                <h4>消费者各年龄段需求占比</h4>
              </div>
              <div className="title-switch">
                <Switch size="large" checkedChildren="开" unCheckedChildren="关"/>
              </div>
              <div className="guimo-table">
                <Table bordered dataSource={dataSource_xuqiu} columns={columns_xuqiu} pagination={false}/>
                <Button className="editable-add-btn">添加</Button>
              </div>
              <div className="page-btn-cont">
                <Button size="large" type="primary">保存</Button>
              </div>
            </div>
            {/*消费者各收入占比*/}
            <div className="title-cont">
              <div className="title-page">
                <h4>消费者各年龄段需求占比</h4>
              </div>
              <div className="title-switch">
                <Switch size="large" checkedChildren="开" unCheckedChildren="关"/>
              </div>
              <div className="guimo-table">
                <Table bordered dataSource={dataSource_shouru} columns={columns_shouru} pagination={false}/>
                <Button className="editable-add-btn">添加</Button>
              </div>
              <div className="page-btn-cont">
                <Button size="large" type="primary">保存</Button>
              </div>
            </div>
            <h4 className="page-title">服务师行业数据</h4>
            <div className="title-cont">
              <div className="title-page">
                <h4>消费者总数</h4>
              </div>
              <div className="title-switch">
                <Switch size="large" checkedChildren="开" unCheckedChildren="关"/>
              </div>
              <Row gutter={16}>
                <Col span={3} className="text-r">
                  <div className="ant-form-item-label">
                    <label><span className="span-left">请填写总数</span></label>
                  </div>
                </Col>
                <Col span={5}>
                  <Input size="large" placeholder="请填写总数"/>
                </Col>
                <Col span={3}>
                  <Button size="large" type="primary">保存</Button>
                </Col>
              </Row>
            </div>
            <h4 className="page-title">企业行业数据</h4>
            {/*家政行业市场规模*/}
            <div className="title-cont">
              <div className="title-page">
                <h4>家政行业市场规模</h4>
              </div>
              <div className="title-switch">
                <Switch size="large" checkedChildren="开" unCheckedChildren="关"/>
              </div>
              <div className="guimo-table">
                <Table bordered dataSource={dataSource} columns={columns} pagination={false}/>
                <Button className="editable-add-btn" onClick={this.handleAdd}>添加</Button>
              </div>
              <div className="page-btn-cont">
                <Button size="large" type="primary">保存</Button>
              </div>
            </div>
          </TabPane>
        </Tabs>
      </div>
    )
  }
}